<template>
  <!-- 投诉类型 -->
  <div class="TypeComplaint">
    <div class="TypeComplaint-tittle">
      <div class="crumbs">
        <p><span>系统设置 /</span> <span> 投诉类型管理</span></p>
        <h3>投诉类型管理</h3>
      </div>
      <div class="search">
        <div class="search-left">
          <span>名称</span>
          <el-input v-model="input" placeholder="请输入" />
        </div>
        <div class="search-right">
          <el-button type="primary" @click="searchFn">查询</el-button>
          <el-button type="primary" plain @click="resetFn">重置</el-button>
        </div>
      </div>
    </div>
    <div class="ResidentLabels-content">
      <div class="content-title">
        <span>投诉类型列表</span>
        <div class="title-btn">
          <el-button type="primary" @click="addFn">+ 新建</el-button>
          <el-button type="primary" plain @click="bulkDel">批量操作</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :cell-style="cellStyle"
        :header-row-style="headerStyle"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="80" align="center" />
        <el-table-column
          prop="complaintType"
          label="投诉类型名称"
          align="center"
        />
        <el-table-column prop="user.name" label="添加人" align="center" />
        <el-table-column prop="addTime" label="添加时间" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" text @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button type="primary" text @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <div class="pages">
        <Page
          :count="count"
          :total="total"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div>
    </div>
    <!-- 新建弹窗 -->
    <el-dialog v-model="addLabel" title="编辑标签" width="30%">
      <div class="tanchu-body">
        <span style="width: 90px">标签名称</span
        ><input type="text" v-model="addInput" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addLabel = false">取消</el-button>
          <el-button type="primary" @click="addEnsure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="dialogVisible" title="编辑标签" width="30%">
      <div class="tanchu-body">
        <span style="width: 90px">标签名称</span
        ><input type="text" v-model="editInput" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editEnsure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from "../../utils/http";
import { ref, reactive, onMounted } from "vue";
import Page from "../../components/Page.vue";
import timeTrans from "../../utils/time";
import { ElMessage } from "element-plus";

const input = ref("");
const tableData = ref([]);
const cellStyle = ref({
  height: "60px",
  fontSize: "15px",
});
const headerStyle = ref({
  height: "60px",
  fontSize: "15px",
  color: "black",
});
let page = ref(1);
const count = ref(5);
let total = ref(20);
let currentPage = page;

let getdata = () => {
  axios({
    url: "/complaintType/list",
    method: "get",
    params: {
      page: page.value,
      limit: count.value,
      complaintType: input.value,
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      tableData.value = data.data;
      total.value = data.total;
    }
  });
};
let handleCurrentChange = (val) => {
  console.log(val);
  page.value = val;
  getdata();
};
let handleSizeChange = (val) => {
  console.log(val);
  count.value = val;
  getdata();
};
onMounted(() => {
  getdata();
});

// 查询
const searchFn = () => {
  console.log("查询");
  getdata();
};

// 重置
const resetFn = () => {
  console.log("重置");
  input.value = "";
  getdata();
};
// 新建
let addLabel = ref(false);
let addInput = ref("");
let addFn = () => {
  addLabel.value = true;
};
let addEnsure = () => {
  addLabel.value = false;
  let nowDate = Date.now();
  let getTime = timeTrans(nowDate);
  let userId = sessionStorage.getItem("id");
  axios({
    url: "/complaintType/add",
    method: "post",
    data: {
      addPersonId: userId,
      addTime: getTime,
      complaintType: addInput.value,
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      getdata();
      addInput.value=""
    }
  });
};

const multipleSelection = ref([]);
// 多选框变得方法
const selectionChange = (val) => {
  console.log(val);
  multipleSelection.value = [];
  val.forEach((v) => {
    multipleSelection.value.push(v.id);
  });
  console.log(multipleSelection.value);
  console.log(typeof multipleSelection.value);
};

// 批量删除
let bulkDel = () => {
  axios({
    url: "/complaintType/delete",
    method: "DELETE",
    data:  multipleSelection.value,
    
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getdata();
    } else {
      ElMessage.error("删除失败");
    }
  });
};

// 编辑
let dialogVisible = ref(false);
let editId = ref(0);
let editInput = ref("");
let edit = (e) => {
  dialogVisible.value = true;
  editId.value = e.id;
  editInput.value = e.labelName;
};
// 弹窗：
// 编辑确认
let editEnsure = () => {
  dialogVisible.value = false;
  axios({
    url: "/complaintType/update",
    method: "put",
    data: {
      id: editId.value,
      labelName: editInput.value,
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      ElMessage({
        message: "编辑成功",
        type: "success",
      });
      getdata();
    }
  });
};

// 删除
let del = (e) => {
  console.log(e);
  let arrId = [];
  arrId.push(e);
  console.log(arrId);
  axios({
    url: "/complaintType/delete",
    method: "DELETE",
    data: arrId,
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getdata();
    }
  });
};
</script>

<style lang="less" scoped>
.TypeComplaint {
  width: 90%;
  margin: auto;
  // border: 1px solid red;
  .TypeComplaint-tittle {
    // border: 1px solid red;
    background-color: white;
    margin-top: 20px;
    .crumbs {
      padding: 15px 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      p {
        margin-bottom: 10px;
        span:nth-child(1) {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
    .search {
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search-left {
        span {
          font-size: 16px;
        }
        .el-input {
          margin-left: 15px;
          width: 250px;
        }
      }
    }
  }
  .ResidentLabels-content {
    padding: 15px 20px;
    // border: 1px solid red;
    margin-top: 20px;
    background-color: white;
    .content-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .pages {
      margin-top: 30px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .el-dialog {
    .tanchu-body {
      display: flex;
      input {
        flex: 1;
      }
    }
  }
}
</style>
